<template>
  <div class="explore-graph-page">
    <div class="explore-themed graph-wrap">
      <div class="graph-head">
        <div class="left">
          <h2 class="explore-title">探索图谱</h2>
          <p class="explore-sub">按等级分组的节点概览</p>
        </div>
        <div class="graph-tools">
          <el-select v-model="level" placeholder="难度层" clearable style="max-width:160px" @change="load">
            <el-option v-for="l in [1,2,3,4,5]" :key="l" :label="'Lv.'+l" :value="l" />
          </el-select>
          <el-input v-model="keyword" placeholder="搜索标题关键词" clearable style="max-width:220px" @change="applyFilter" />
        </div>
      </div>

      <el-card :loading="loading" shadow="never" body-style="padding: 8px 10px 10px;">
      <el-collapse v-model="activeLevels">
        <el-collapse-item v-for="(group, l) in grouped" :key="l" :name="String(l)">
          <template #title>
            <span class="graph-lv-title">Lv. {{ l }}</span>
            <span class="lv-count">（{{ group.length }}）</span>
          </template>
          <div class="graph-list">
            <div v-for="row in group" :key="row.id" class="graph-item" :class="{ locked: row.is_locked }" @click="goNode(row)" :title="row.is_locked ? (row.locked_reason||'未解锁') : ''">
              <div class="gi-title">
                <span class="t">{{ row.title }}</span>
                <el-tag v-if="row.is_locked" size="small" type="warning" effect="plain">未解锁</el-tag>
              </div>
              <div class="gi-desc">{{ row.short_desc }}</div>
              <div class="gi-meta">
                <el-tag size="small">Lv. {{ row.level }}</el-tag>
                <el-tag size="small" type="info" v-if="row.category">{{ row.category }}</el-tag>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-empty v-if="!loading && Object.keys(grouped).length===0" description="暂无数据" />
      </el-card>
    </div>
  </div>
  
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { exploreApi } from '@/api/explore'

const router = useRouter()

const loading = ref(false)
const level = ref()
const keyword = ref('')
const items = ref([])
const filtered = ref([])
const activeLevels = ref([])

const grouped = computed(() => {
  const map = {}
  for (const n of filtered.value) {
    const l = n.level || 0
    if (!map[l]) map[l] = []
    map[l].push(n)
  }
  return map
})

function goNode(row) {
  if (row.is_locked) return
  router.push(`/explore/node/${row.id}`)
}

async function load() {
  loading.value = true
  try {
    const params = {}
    if (level.value) params.level = level.value
    const { data } = await exploreApi.listNodes(params)
    items.value = data
    applyFilter()
    // 展开所有层级，或仅展开选层
    const levels = Array.from(new Set(items.value.map(i => i.level || 0))).sort((a,b)=>a-b)
    activeLevels.value = levels.map(l => String(l))
  } finally { loading.value = false }
}

function applyFilter() {
  const kw = (keyword.value || '').trim().toLowerCase()
  if (!kw) { filtered.value = items.value; return }
  filtered.value = items.value.filter(n => (n.title||'').toLowerCase().includes(kw) || (n.short_desc||'').toLowerCase().includes(kw))
}

onMounted(load)
</script>

<style scoped>
.lv-title { font-weight:600; margin-right:6px; }
.lv-count { color:#888; }
.locked { color:#999; }
.graph-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:10px; }
.graph-item { border:1px solid #eadfcd; border-radius:14px; padding:10px; background:linear-gradient(180deg,#fff,#faf6ef); box-shadow:0 6px 14px rgba(0,0,0,.05); cursor:pointer; }
.graph-item:hover { transform: translateY(-1px); }
.graph-item.locked { filter: grayscale(.55); opacity:.85; cursor:not-allowed; }
.graph-item .gi-title { display:flex; align-items:center; justify-content:space-between; font-weight:700; color:#3a2a17; }
.graph-item .gi-desc { color:#6b5a46; font-size:13px; margin:6px 0; min-height: 34px; }
.graph-item .gi-meta { display:flex; gap:8px; }
</style>
